<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.min.css">
    <style>
        #outer {
            margin: 50px auto;
            padding: 20px;
            width: 260px;
            height: 260px;
            border: 10px solid #000;
            /* overflow: hidden; */
        }

        #inner {

            padding: 20px;
            height: 200px;
            border: 10px solid #f00;
        }

        #center {
            height: 180px;
            border: 10px solid #ff0;



        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="inner">
            <div id="center"></div>
        </div>
    </div>
    <script>
        let outer = document.getElementById('outer')
        let inner = document.getElementById('center')
        let center = document.getElementById('center')
        // client top left width height
        // clientWidth=width+padding*2 获取的

        document.documentElement.clientWidth || document.body.clientWidth
        document.documentElement.clientHeight || document.body.clientHeight
        document.documentElement.scrollWidth || document.body.scrollWidth
        document.documentElement.scrollHeight || document.body.scrollHeight
        // 获取属性样式值
        // []里面不带‘’是一个变量 传入变量值做属性 ojb.attr是获取attr属性对应，不是设置。
        let getCss = function (currentElement, attr) {
            //  处理ie低版本window['getComputedStyle']==undeifed
            if (!window['getComputedStyle']) {
                return new SyntaxError('您的浏览器版本过低，请升级到最新版本，谢谢配合！！')
            }
            let val = window.getComputedStyle(currentElement, null)[attr]

            // 不是所有的值都去掉单位 比如display='block' 数字+单位 才去单位
            let reg = /^-?\d+(\.\d+)?(px|rem|em|pt)?$/i;

            reg.test(val) ? val = parseFloat(val) : null
            return val
        }


        // 设置属性单一样式值
        let setCss = function (currentEle, attr, value) {
            if (attr === 'opacity') {
                currentEle.style.opacity = value;
                currentEle.style.filter = `alpha(opacity=${value * 100})`;
                return;
            }

            let reg = /^(width|height|fontSize|((margin|padding)?(top|left|right|bottom)?))$/i;
            currentEle['style'][attr] = reg.test(attr) ? parseFloat(value) + 'px' : value
            

        }
        // setCss(inner, 'width', 500)

        // 批量设置css
        let obj1 = {
            width: 400,
            height: 400,
            padding: 30,
            fontSize: '40px',
            backgroundColor: 'red',
            opacity: 0.5

        }
        // for-in循环空对象不会报错
        let setGroupCss = function (currentEle, obj = {}) {
            for (let k in obj) {
                if (!obj.hasOwnProperty(k)) break
                let reg = /^(width|height|fontSize|((margin|padding)?(top|left|right|bottom)?))$/i;
                currentEle['style'][k] = reg.test(k) ? parseFloat(obj[k]) + 'px' : obj[k]
            }
        }
        // setGroupCss(outer, obj1)

        // css集合：get/set/gruopset一体方法

        // let css = function (...arg) {
        //     let length = arg.length
        //     // 单一设置setCSS setCss(inner, 'width', 500) arg=[***,***,***]
        //     if (length >=3) {
        //         // setCss(arg[0],arg[1],arg[2])
        //         // setCss.apply(null,arg)
        //         setCss(...arg)

        //     }
        //     // 批量设置
        //     else if (arg[1] instanceof Object) {
        //         setGroupCss(...arg) //把arg数组展开一次付给2个参数
        //     }
        //     // get获取样式
        //     else {
        //         return getCss(...arg)
        //     }

        // }
        // let val=css(outer,'width',500)
        // console.log(val)

        // 最终
        let css = function (...arg) {
            let length = arg.length,
                fn = getCss //2个参数
            // setCss3参数
            fn = length === 3 ? setCss : fn
            fn = length == 2 && (arg[1] instanceof Object) ? setGroupCss : fn
            return fn(...arg)
        }
        console.log(css(outer, 'width'))
        // css(outer,obj1)
        css(outer, 'width', 800)
        css(outer,obj1)



    </script>
</body>

</html>